import React, { Component } from 'react'
import {Route,Switch} from 'react-router-dom'

import MyNavLink from '../../../component/MyNavLink'
import Detail from './Detail'

export default class Message extends Component {
  render() {
    return (
      //向路由组件传递params参数
      // <div>  
      //   <MyNavLink to="/home/message/01/消息1"  > message01 </MyNavLink> <br />
      //   <MyNavLink to="/home/message/02/消息2"  > message02 </MyNavLink> <br />
      //   <MyNavLink to="/home/message/03/消息3"  > message03</MyNavLink>
      //   <hr />
      //   <Switch>
      //     <Route path="/home/message/:id/:title" component={Detail} />
      //   </Switch>
      // </div>

      //向路由组件传递search参数
      // <div>
      //   <MyNavLink to={`/home/message/?id=${'01'}&title=${'消息1'}`} > message01 </MyNavLink> <br />
      //   <MyNavLink to={`/home/message/?id=${'02'}&title=${'消息2'}`}  > message02 </MyNavLink> <br />
      //   <MyNavLink to="/home/message/?id=03&title=消息3"> message03</MyNavLink>
      //   <hr />
      //   <Switch>
      //     <Route path="/home/message" component={Detail} />
      //   </Switch>
      // </div>

      <div>
      <MyNavLink to={{pathname:"/home/message",state:{id:'01',title:'消息1'}}} > message01 </MyNavLink> <br />
      <MyNavLink to={{pathname:"/home/message",state:{id:'02',title:'消息2'}}} > message02 </MyNavLink> <br />
      <MyNavLink to={{pathname:"/home/message",state:{id:'03',title:'消息3'}}} > message03 </MyNavLink> <br />
      <hr />
      <Switch>
        <Route path="/home/message" component={Detail} />
      </Switch>
      </div>
    )
  }
}
